<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>03_JQuery-监听文档加载</title>
</head>
<body>

  <script src="../libs/jquery-3.6.0.js"></script>
  <script>
    // 1. 监听文档加载
    // $(document).ready(function() {
    //   console.log('文档加载完成');
    // })

    // 2. 简写
    $(function() {
      console.log('文档加载完成');
      var $sub = jQuery('.sub')
      var $span = jQuery('.counter')
      var $add = jQuery('.add')
      
      var counter = 0
      $sub.on('click', function() {
        $span.text(--counter)      
      })
      $add.on('click', function() {
        $span.text(++counter)
      })
    })

    // 3. 监听文档完全解析完成
    // $('document').ready(function() {
    //   console.log('文档完全解析完成')
    // })

    // 4. 监听文档完全解析完成
    // $().ready(function() {
    //   console.log('文档完全解析完成')
    // })
  </script>

  <button class="sub">-</button>
  <span class="counter">0</span>
  <button class="add">+</button>
  
</body>
</html>